<template>
  <!-- 公共厕所 -->
  <div class="content">
    <!-- 左侧面板 -->
    <div class="left-panel">
      <panelBox title="所有归属权" style="width: 472px">
        <v-chart class="chart" :option="option1" autoresize />
        <div class="count-value">总数：{{ zong_count }}个</div>
      </panelBox>
      <panelBox title="停车场类型" style="width: 472px">
        <v-chart class="chart" :option="option2" autoresize />
        <div class="count-value">总数：{{ zong_count }}个</div>
      </panelBox>
      <panelBox title="停车场使用面积" style="width: 472px">
        <v-chart class="chart" :option="option3" autoresize />
        <div
          class="count-value"
          style="
            font-weight: 400;
            left: 50%;
            transform: translateX(-50%);
            bottom: 10px;
          "
        >
          总面积：{{ zong_mianji }} m²
        </div>
      </panelBox>
    </div>
    <!-- 中间3D场景 -->
    <div class="center-view">
      <div id="map-box" class="map-box">123</div>
      <div class="flex" style="height: 40%">
        <panelBox title="可停放车辆及机具数" style="width: 50%">
          <div class="card-flex">
            <div
              class="circle-box-item"
              v-for="(item, index) in module_4"
              :key="index"
            >
              <div class="circle-box">
                <div
                  class="circle-inner"
                  :style="{ borderColor: item.color, color: item.color }"
                >
                  {{ item.count }}
                </div>
              </div>
              <div class="circle-inner-text">{{ item.name }}</div>
            </div>
            <div
              class="count-value"
              style="left: 50%; transform: translateX(-50%); bottom: 40px"
            >
              总数：{{ zong_liang }}辆
            </div>
          </div>
        </panelBox>
        <panelBox title="车辆充电设备" style="width: 50%">
          <v-chart class="chart" :option="option5" autoresize />
          <div
            class="count-value"
            style="left: 50%; transform: translateX(-50%); bottom: 40px"
          >
            总数：{{ zong_count }}个
          </div>
        </panelBox>
      </div>
    </div>
    <!-- 右侧面板 -->
    <div class="right-panel">
      <panelBox title="运营单位" style="width: 472px">
        <v-chart class="chart" :option="option6" autoresize />
        <div class="count-value">总数：{{ zong_count }}个</div>
      </panelBox>
      <panelBox title="街镇分布" style="width: 472px">
        <v-chart class="chart" :option="option7" autoresize />
        <div class="count-value">总数：{{ zong_count }}个</div>
      </panelBox>
      <panelBox title="电车充电情况" style="width: 472px">
        <v-chart class="chart" :option="option8" autoresize />
      </panelBox>
    </div>
  </div>
</template>
<script setup>
import { ref, onMounted } from "vue";
import panelBox from "./components/panel-box.vue";
import { parkingLotsStatistics } from "@/api/parking_lots";
const props = defineProps({
  streetId: {
    type: Number,
    default: null,
  },
});
const is_cli_map = ref(0);
const configListData = ref([]);
const ListData = ref([]);

const zong_count = ref(0);
const zong_liang = ref(0);
const zong_mianji = ref(0);

let map;
defineOptions({
  name: "PublicToilet",
});
const module_4 = ref([]);
onMounted(() => {
  getData(props.streetId);
});

const map_init = () => {
  map = new BMapGL.Map("map-box");
  var point = new BMapGL.Point(
    configListData.value[0].map_center_longitude,
    configListData.value[0].map_center_latitude
  );
  map.centerAndZoom(point, configListData.value[0].map_default_zoom);
  map.enableScrollWheelZoom(true);
  map.clearOverlays();
  var scaleCtrl = new BMapGL.ScaleControl(); // 添加比例尺控件
  map.addControl(scaleCtrl);
  var zoomCtrl = new BMapGL.ZoomControl(); // 添加缩放控件
  map.addControl(zoomCtrl);

  let list = ListData.value;
  for (var i = 0; i < list.length; i++) {
    // 使用立即执行函数创建闭包，避免循环变量引用问题
    (function(item, index) {
      // 创建当前标记的坐标点
      const currentPoint = new BMapGL.Point(item.longitude, item.latitude);
      
      // 创建自定义图标
      let img = "";
      if (item.attribute == "正式") {
        img = "zhengchang.png";
      } else {
        img = "guihua.png";
      }
      var marker = new BMapGL.Marker(currentPoint);
      map.addOverlay(marker);
      
      // 创建信息窗口内容
      var opts = {
        width: 250,
        height: 80,
        offset: new BMapGL.Size(0, -30) // 向上偏移，避免被标记遮挡
      };
      var infoContent = `<div style="padding: 5px;font-size:18px;">${item.name || '未知'}</div>`;
      var infoWindow = new BMapGL.InfoWindow(infoContent, opts);
      
      // 添加点击事件，使用闭包中的currentPoint
      marker.addEventListener('click', function () {
        map.openInfoWindow(infoWindow, currentPoint);
      });
    })(list[i], i);
  }
};
const getData = async (id = null) => {
  let res = await parkingLotsStatistics({ street_id: id });
  console.log(res);
  if (res.code == 0) {
    handleData1(res.data.module_1);
    handleData2(res.data.module_2);
    handleData3(res.data.module_3);
    module_4.value = res.data.module_4;
    handleData5(res.data.module_5);
    handleData6(res.data.module_8);
    handleData7(res.data.module_7);
    handleData8(res.data.module_6);

    ListData.value = res.data.map || [];
    configListData.value = res.config || [];

    zong_count.value = res.data.zong_count;
    zong_liang.value = res.data.zong_liang;
    zong_mianji.value = res.data.zong_mianji;
    map_init();
  }
};
const handleData1 = (data) => {
  console.log(data);
  option1.value.series[0].data = data.map((item) => ({
    value: item.count,
    name: item.name,
    itemStyle: {
      color: item.color,
    },
  }));
  option1.value.legend.data = data.map((item) => item.name);
};
const handleData2 = (data) => {
  console.log(data);
  option2.value.series[0].data = data.map((item) => ({
    value: item.count,
    name: item.name,
    itemStyle: {
      color: item.color,
    },
  }));
  option2.value.legend.data = data.map((item) => item.name);
};
const handleData3 = (data) => {
  console.log(data);
  option3.value.xAxis.data = data.map((item) => item.name);
  option3.value.series[0].data = data.map((item) => {
    return {
      value: item.count,
      name: item.name,
      label: {
        show: true,
        position: "top",
        color: item.color,
        fontSize: 18,
        formatter: "{c}%",
      },
      itemStyle: {
        color: item.color,
      },
    };
  });
};

const handleData5 = (data) => {
  console.log(data);
  option5.value.legend.data = data.map((item) => item.name);
  option5.value.series[0].data = data.map((item) => {
    return {
      value: item.count,
      name: item.name,
      itemStyle: {
        color: item.color,
      },
    };
  });
};

const handleData6 = (data) => {
  console.log(data);
  option6.value.legend.data = data.map((item) => item.name);
  option6.value.series[0].data = data.map((item) => {
    return {
      value: item.count,
      name: item.name,
      itemStyle: {
        color: item.color,
      },
    };
  });
};

const handleData7 = (data) => {
  console.log(data);
  option7.value.legend.data = data.map((item) => item.name);
  option7.value.series[0].data = data.map((item) => {
    return {
      value: item.count,
      name: item.name,
      itemStyle: {
        color: item.color,
      },
    };
  });
};

const handleData8 = (data) => {
  console.log(data);
  option8.value.xAxis.data = data.map((item) => item.name);
  option8.value.series[0].data = data.map((item) => {
    return {
      value: item.count,
      name: item.name,
      label: {
        show: true,
        position: "top",
        color: item.color,
        fontSize: 18,
      },
      itemStyle: {
        color: item.color,
      },
    };
  });
};
// 测试饼图
const option1 = ref({
  tooltip: {
    trigger: "item",
    formatter: "{a} <br/>{b} : {c} ({d}%)",
  },
  legend: {
    orient: "vertical",
    right: "20",
    data: [],
    textStyle: {
      color: "#fff",
      fontWeight: "bold",
    },
  },
  series: [
    {
      name: "所有归属权",
      type: "pie",
      radius: ["40%", "70%"],
      center: ["40%", "50%"], // 环形图中心位置
      data: [],
      label: {
        formatter: "{c}个",
        color: "#fff",
        fontWeight: "bold",
      },
      emphasis: {
        itemStyle: {},
      },
    },
  ],
});
// 测试饼图
const option2 = ref({
  tooltip: {
    trigger: "item",
    formatter: "{a} <br/>{b} : {c} ({d}%)",
  },
  legend: {
    orient: "vertical",
    right: "20",
    data: [],
    textStyle: {
      color: "#fff",
      fontWeight: "bold",
    },
  },
  series: [
    {
      name: "所有归属权",
      type: "pie",
      radius: "70%",
      center: ["40%", "50%"],
      data: [],
      label: {
        formatter: "{c}个",
        color: "#fff",
        fontWeight: "bold",
      },
      emphasis: {
        itemStyle: {},
      },
    },
  ],
});
const option3 = ref({
  grid: {
    height: "65%",
    bottom: "25%",
  },
  tooltip: {
    trigger: "item",
    formatter: "{a} <br/>{b} : {c}个",
    fontWeight: "bold",
  },
  xAxis: {
    type: "category",
    data: [],
    axisLabel: {
      color: "#fff",
      fontWeight: "bold",
    },
  },
  yAxis: {
    type: "value",
    max: 100,
    min: 0,
    axisLabel: {
      color: "#fff",
      fontWeight: "bold",
      formatter: "{value}%",
    },
  },
  series: [
    {
      name: "公共厕所等级",
      data: [],
      type: "bar",
      barWidth: 60,
      itemStyle: {
        color: "#409EFF",
      },
    },
  ],
});

const option5 = ref({
  tooltip: {
    trigger: "item",
    formatter: "{a} <br/>{b} : {c} ({d}%)",
  },
  legend: {
    orient: "vertical",
    right: "20",
    data: [],
    textStyle: {
      color: "#fff",
      fontWeight: "bold",
    },
  },
  series: [
    {
      name: "所有归属权",
      type: "pie",
      radius: "50%",
      center: ["50%", "45%"],
      data: [],
      label: {
        formatter: "{d}%",
        position: "inner",
        color: "#fff",
        fontWeight: "bold",
      },
      emphasis: {
        itemStyle: {},
      },
    },
  ],
});

// 测试饼图
const option6 = ref({
  tooltip: {
    trigger: "item",
    formatter: "{a} <br/>{b} : {c} ({d}%)",
  },
  legend: {
    orient: "vertical",
    right: "20",
    data: [],
    textStyle: {
      color: "#fff",
      fontWeight: "bold",
    },
  },
  series: [
    {
      name: "所有归属权",
      type: "pie",
      radius: "70%",
      center: ["30%", "50%"],
      data: [],
      label: {
        formatter: "{c}个",
        color: "#fff",

        fontWeight: "bold",
      },
      emphasis: {
        itemStyle: {},
      },
    },
  ],
});

// 测试饼图
const option7 = ref({
  tooltip: {
    trigger: "item",
    formatter: "{a} <br/>{b} : {c} ({d}%)",
  },
  legend: {
    orient: "vertical",
    right: "20",
    data: [],
    textStyle: {
      color: "#fff",
      fontWeight: "bold",
    },
  },
  series: [
    {
      name: "所有归属权",
      type: "pie",
      radius: "70%",
      center: ["30%", "50%"],
      data: [],
      label: {
        formatter: "{d}%",
        color: "#fff",
        position: "inner",
        fontWeight: "bold",
      },
      emphasis: {
        itemStyle: {},
      },
    },
  ],
});
// 柱状图
const option8 = ref({
  tooltip: {
    trigger: "item",
    formatter: "{a} <br/>{b} : {c}个",
  },
  xAxis: {
    type: "category",
    data: [],
    axisLabel: {
      color: "#fff",
      fontWeight: "bold",
    },
  },
  yAxis: {
    type: "value",
    splitNumber: 3,
    axisLabel: {
      color: "#fff",
      fontWeight: "bold",
      formatter: "{value}个",
    },
  },
  series: [
    {
      name: "公共厕所等级",
      data: [],
      type: "bar",
      barWidth: 60,
      itemStyle: {
        color: "#409EFF",
      },
    },
  ],
});

defineExpose({
  getData,
});
</script>
<style lang="scss" scoped>
@use "./index.scss" as *;
#map-box {
  height: 100%;
  width: 100%;
}
</style>
